<template>
  <div>
    <div class="title">
      <h1>添 加 商 品</h1>
    </div>
    <el-row>
      <el-col :span="8">
        <el-image :src="modelData.image">
          <div slot="error" class="image-slot">
            <div style="margin-top: 60%;"/>
            <i class="el-icon-picture-outline"></i>
            <span class="demonstration">商品图将会显示在这里</span>
          </div>
        </el-image>
      </el-col>
      <el-col :span="8">
        <product-form
          @save-product="addProduct"
          :model="modelData"
          :manufacturers="manufacturers"
          v-on:previewImage="updateImagePreview"
        >
        </product-form>
      </el-col>
      <el-col :span="8"></el-col>
    </el-row>
  </div>
</template>

<script>
import ProductForm from "@/components/products/ProductForm.vue";
export default {
  data() {
    return {
      modelData: {
        name: '',
        price: 0,
        image: '',
        manufacturer: { name: '' },
        description: '',
      },
    };
  },
  created() {
    if (this.manufacturers.length === 0) {
      this.$store.dispatch("allManufacturers");
    }
  },
  computed: {
    manufacturers() {
      return this.$store.getters.allManufacturers;
    },
  },
  methods: {
    addProduct(model) {
      this.$store.dispatch("addProduct", {
        product: model,
      });
    },
    updateImagePreview(imgAddr) {
      this.modelData.image = imgAddr;
    }
  },
  components: {
    "product-form": ProductForm,
  },
};
</script>